// 富文本编辑器的样式
.w-e-text-container {
  font-size: 15px;
  line-height: 1.6;
  b,
  strong {
    font-weight: bolder;
  }
  h1,
  h2,
  h3,
  h4,
  h5 {
    font-style: normal;
    font-weight: 800;
    overflow-wrap: break-word;
  }
  h1 {
    font-size: 26px;
    line-height: 40px;
  }
  h2 {
    font-size: 22px;
    line-height: 34px;
  }
  h3 {
    font-size: 20px;
    line-height: 30px;
  }
  h4 {
    font-size: 18px;
    line-height: 26px;
  }
  h5 {
    font-size: 16px;
    line-height: 22px;
  }
  // 编辑器序列号的展示
  ol,
  ul {
    list-style-type: none;
    line-height: 22px;
  }
  ol {
    list-style-type: decimal;
    margin-left: 20px;
  }
  ul {
    list-style-type: disc;
    margin-left: 20px;
  }
  p{
    font-size: 15px;
    line-height: 1.6;
  }
}

.w-e-bar {
  background-color: transparent;
  .w-e-bar-divider {
    position: relative;
    background-color: transparent;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 30%;
      bottom: 30%;
      width: 1px;
      background-color: var(--w-e-toolbar-border-color);
      z-index: 1;
    }
  }
  &.w-e-hover-bar {
    background-color: white;
  }
}
.w-e-bar-item {
  border-radius: 6px;
  button {
    border-radius: 6px;
  }

  .active {
    color: var(--w-e-toolbar-active-color);
    color: #2adaa7;
    border-radius: 4px;
    svg path {
      fill: #2adaa7;
    }
  }
}
.w-e-text-placeholder {
  font-weight: 400;
  font-size: 15px;
  color: #86909c;
  line-height: 1.6;
  text-align: left;
  font-style: normal;
}

// 隐藏多余的菜单
// li[data-value='header3'],
// li[data-value='header4'],
// li[data-value='header5'] {
//   display: none;
// }
li[data-value='header1'] {
  font-size: 26px;
  line-height: 40px;
  font-weight: 800;
}
li[data-value='header2'] {
  font-size: 22px;
  line-height: 34px;
  font-weight: 800;
}
li[data-value='header3'] {
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
}
li[data-value='header4'] {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}
li[data-value='header5'] {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

// 页面布局的样式
.spin-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  height: 100%;
  overflow: hidden;
  color: #333;
}
.wangeditor-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 0 16px;
  .editor-bg {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #f7f8fa;
    // border-radius: 12px 12px 0 0;
    border-radius: 12px;
    box-sizing: border-box;

    // 头部编辑器导航
    .card-header {
      height: 60px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #e5e6ec;
      position: relative;
      .price {
        position: absolute;
        top: 20px;
        right: 30px;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        color: #2aa3ff;
      }
    }
    .card-body {
      flex: 1;
      width: 100%;
      overflow-y: auto;
      border-bottom: 1px solid #f4f6f9;

      .editor-wrapper {
        width: 800px;
        min-height: 100%;
        margin: 0 auto;
        margin-top: 20px;
        background-color: white;
        padding: 0 6px;
        border-radius: 12px 12px 0 0;

        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .editor-title {
          width: 100%;
          color: #1d2129;
          background-color: white;
          height: 60px;
          padding: 0 10px;
          box-sizing: border-box;
          border-bottom: 1px solid rgb(var(--gray-2));
        }
        .editor-container {
          flex: 1;
          width: 100%;
          box-sizing: border-box;
          padding: 10px 0;
          display: flex;

          .editor-content {
            width: 100%;
            height: 100%;
            min-height: 300px;
            min-width: 300px;
            font-size: 15px;
            line-height: 1.6;
            color: #1d2129;
            user-select: text;
            white-space: pre-wrap;
            overflow-wrap: break-word;
            position: relative;
          }
        }
        .editor-bottom {
          height: 32px;
        }
      }
      .scroll-bottom {
        height: 1px;
        background-color: transparent;
      }
    }
  }
  .card-footer {
    height: 60px;
    width: 100%;
    .footer {
      width: 800px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .footer-set {
        display: flex;
      }
      .footer-set:first-child {
        margin-left: 15px;
      }
    }
    .total-length {
      box-sizing: border-box;
      margin: 0;
      min-width: 0;
      color: #8491a5;
      font-size: 14px;
      margin-right: 32px;
      span,
      b {
        color: #8491a5;
        font-size: 14px;
        font-weight: normal;
      }
    }
    .arco-space-horizontal:last-child {
      margin-right: 15px;
    }
  }
}

#top-container {
  border-bottom: 1px solid #e8e8e8;
  padding-left: 30px;
}

#editor-toolbar {
  width: 1350px;
  background-color: #fcfcfc;
  margin: 0 auto;
}

#content {
  height: calc(100% - 40px);
  background-color: rgb(245, 245, 245);
  overflow-y: auto;
  position: relative;
}

#editor-container {
  width: 850px;
  margin: 30px auto 150px auto;
  background-color: #fff;
  padding: 20px 50px 50px 50px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}

#title-container {
  padding: 20px 0;
  border-bottom: 1px solid #e8e8e8;
}

#title-container input {
  font-size: 30px;
  border: 0;
  outline: none;
  width: 100%;
  line-height: 1;
}

#editor-text-area {
  min-height: 900px;
  margin-top: 20px;
}

.tip-text {
  font-size: 12px;
  font-weight: 400;
  color: #86909c;
  margin-bottom: 10px;
}
.article-title {
  font-size: 16px;
  text-align: center;
  line-height: 22px;
  margin-bottom: 10px;
  color: #1d2129;
}
.editor-wrapper .editor-title {
  border: none;
  outline: none;

  .arco-input.arco-input-size-large {
    border: none;
    outline: none;
    font-weight: 600;
    font-size: 20px;
    color: #1d2129;
    line-height: 28px;
  }
}
.w-e-bar svg {
  width: 16px;
  height: 16px;
}

/* 输入框的样式*/
.w-e-modal input[type='text']:disabled {
  border: 1px solid var(--w-e-modal-button-border-color);
  color: var(--w-e-modal-button-border-color);
}

.w-e-scroll {
  min-height: 300px;
}
/* 线条的分割线 */
.w-e-textarea-divider {
  padding: 0.5em 0;
  width: 100%;
}

/* 引用的样式 */
.detail-content {
  blockquote {
    background-color: var(--w-e-textarea-slight-bg-color);
    border-left: 0.5rem solid var(--w-e-textarea-selected-border-color);
    display: block;
    font-size: 100%;
    line-height: 1.5;
    margin: 0.625rem 0;
    padding: 0.625rem;
  }
  p {
    image {
      display: block;
    }
  }
  table {
    border-collapse: collapse;
    td {
      border: 0.0625rem solid var(--w-e-textarea-border-color);
      line-height: 1.5;
      min-width: 1.875rem;
      padding: 0.1875rem 0.3125rem;
      text-align: left;
    }
  }
}

/* 链接卡片的样式 */
.w-e-textarea-link-card-container,
div[data-w-e-type='link-card'] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  background-color: #f8f8fa;
  border-radius: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-flex-direction: row;
  flex-direction: row;
  margin: 16px 0;
  max-width: 100%;
  min-height: 84px;
  overflow: hidden;
  padding: 12px 12px 9px;
  position: relative;
  width: 390px;
  display: flex;
  flex-direction: row;
  .w-e-textarea-link-card-text-content {
    display: block;
    width: 100%;
    .w-e-textarea-link-card-title {
      width: 100%;
      font-size: 14px;
      line-height: 20px;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .w-e-textarea-link-card-text {
      margin-top: 6px;
      font-size: 14px;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      color: #9196a1;
      display: block;
      display: -webkit-box;
      line-height: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
    }
  }
  .w-e-textarea-link-card-icon-container {
    max-width: 20px;
    max-height: 20px;
  }
}

// 话题和@联系人的样式
a[data-w-e-type='mention'],
.w-e-textarea-mention {
  margin: 0 2px;
  border: 2px solid transparent;
  border-radius: 3px;
  padding: 0 3px;
}
span[data-slate-node='element'] {
  margin-top: 10px;
}

// 上传word文档
.upload-doc-container {
  .babel-container {
    width: 100%;
    height: 120px;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0px auto 10px auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    position: relative;
    text-align: center;
    cursor: pointer;
    i.icon {
      text-align: center;
      display: inline-flex;
      align-items: center;
    }
    h6.upload-tip {
      font-size: 12px;
      line-height: 30px;
      text-align: center;
      color: #9196a1;
    }
    p.upload-tips {
      color: #8491a5;
      font-size: 12px;
      line-height: 30px;
      text-align: center;
    }
    .h6.upload-tip {
      font-size: 14px;
      line-height: 30px;
      margin-top: 10px;
      text-align: center;
      color: #9196a1;
    }
    .input-upload {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      cursor: pointer;
    }
  }
  .tips-container {
    padding-bottom: 20px;
    .tips-item {
      color: #8491a5;
      font-size: 13px;
      line-height: 1.7;
      display: inline-block;
      b {
        color: rgb(var(--danger-6));
      }
    }
  }
}

.babel-container .arco-upload-wrapper {
  width: 100%;
  height: 100%;
  .arco-upload {
    .arco-upload-drag {
      padding: 20px;
      .arco-icon-plus {
        font-size: 30px;
      }
    }
  }
}

// 历史版本
.a-drawer-history {
  .arco-drawer {
    background: #ffffff;
    border-radius: 12px 12px 12px 12px;
    border: none !important;
    overflow: hidden;
    height: 688px;
    margin-top: 160px;
    // border-top: 1px solid #E5E6EB;
    // border-left: 1px solid #E5E6EB;
  }
  .arco-drawer-header {
    border: none;
    margin-bottom: 10px;
  }
  .arco-icon-hover {
    color: #86909c;
    font-size: 16px;
  }

  .arco-drawer-header .arco-drawer-title {
    font-weight: 600;
  }

  .arco-drawer-body {
    padding: 0;
  }
  .arco-drawer-mask {
    background-color: transparent;
  }
  .flex-space-around {
    display: flex;
    margin: 0 17px;
    padding-top: 10px;
    img {
      width: 10px;
      height: 10px;
      margin-top: 5px;
      margin-right: 5px;
    }
  }
  .history-record {
    font-size: 14px;
    color: #243142;
    li {
      // height: 53px;
      p {
        margin: 0;
        padding: 0;
      }
    }
    .history-li {
      padding-bottom: 15px;
      position: relative;
    }
    .height-light {
      background: #f3f3f3;
    }

    .history-icon,
    .history-content {
      text-align: left;
      display: inline-block;
    }

    .history-content {
      width: 137px;
      height: 43px;
      margin-left: 30px;
      .history-time {
        font-size: 14px;
        color: #243142;
        margin-left: 10px;
        margin-top: 2px;
      }
      .history-status {
        font-size: 10px;
        color: #86909c;
        margin-left: 10px;
      }
      .history-version {
        margin-left: 34px;
      }
    }
    // 高亮
    .highlight {
      background: #f3f3f3;
      border-radius: 8px 8px 8px 8px;
    }
    .no-highlight {
      background-color: #fff;
      margin-left: 30px;
    }

    .history-icon {
      position: absolute;
      top: 9px;
      left: 16px;
      width: 10px;
      height: 10px;
      .icon-border {
        height: 43px;
        display: inline-block;
        border: 2px solid rgba(229, 230, 235, 0.5);
        margin-left: 3px;
      }
      .span-icon {
        width: 10px;
        height: 10px;
        display: flex;
        border-radius: 50%;
        border: none;
        background-color: transparent;
        align-items: center;
        justify-content: center;
      }
      .span-icon::before {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        border: 1px solid #86909c;
        background-color: #fff;
      }

      .span-icon-active {
        width: 10px;
        height: 10px;
        display: flex;
        border-radius: 50%;
        border: 1px solid #2adaa7;
        background-color: #fff;
        align-items: center;
        justify-content: center;
      }
      .span-icon-active::before {
        content: '';
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #2adaa7;
      }
    }
    .history-li:last-child .icon-border {
      border: none;
    }
  }
}
